import { DetailWrapper } from "./style";
import { Picture } from "./cnps/pictures";
import { useEffect, useState } from "react";
import { PictureBrowser } from "../../base-ui/picture_browser/browser";
import { shallowEqual, useDispatch } from "react-redux";
import { changeHeaderCofiig } from "../../store/moduels/main";

const Detail = () => {
    const [showBrowser, setShowBrowser] = useState(false);
    const disatch = useDispatch();
    useEffect(() => {
        disatch(changeHeaderCofiig(false));
    },[shallowEqual])
    const showClick = () => {
        setShowBrowser(true);
    }
    const closeClick = () => {
        setShowBrowser(false);
    }
    return (
        <DetailWrapper>
            <Picture showClick={showClick}></Picture>
            {showBrowser&&<PictureBrowser closeClick={closeClick}></PictureBrowser>}
         </DetailWrapper>
    )
}
export default Detail;